<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--

  vue 生命周期     vue实例的创建 到销毁的过程
  8 生命周期函数   钩子函数
  每个生命周期函数调用时  vue的状态都是不一样的

 初始化阶段
     beforeCreate     vue只完成了事件和生命周期函数的初始化
     created
    beforeMount
    mounted
 运行阶段
    beforeUpdate
    updated
 销毁阶段    vm.$destroy
     beforeDestroy
     destroyed
-->

<div id="app">
    <p id="message">{{ info }}</p>
    <input type="text" v-model="info">
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            info: 'vue的生命周期',
            users: []
        },
        methods: {},
        beforeCreate: function () {
            console.log("--------beforeCreate--------")
            console.log("info:" + this.info)
            //  是否是发送异步请求的最佳位置  ajax

        },
        created: function () {
            console.log("--------created--------")
            console.log("info:" + this.info)
            //  是发送异步请求的最早位置
        },
        beforeMount: function () {
            console.log("--------beforeMount--------")
            let innerText = document.getElementById("message").innerText;
            console.log(innerText)
        },
        mounted: function () {
            console.log("--------Mounted--------")
            let innerText = document.getElementById("message").innerText;
            console.log(innerText)
        },
        beforeUpdate: function () {
            console.log("--------beforeUpdate--------")
            let innerText = document.getElementById("message").innerText;
            console.log(innerText)
        },
        updated: function () {
            console.log("--------updated--------")
            let innerText = document.getElementById("message").innerText;
            console.log(innerText)
        },
        beforeDestroy: function () {
            console.log("--------beforeDestroy--------")
        },
        destroyed: function () {
            console.log("--------destroyed--------")
        }

    })
</script>
</body>
</html>